<%--
  Created by IntelliJ IDEA.
  User: zgye
  Date: 2019/2/18
  Time: 16:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        function getxx(id) {
            $.post("/getxx",{"id":id},function (json) {
                $("div").css("display","block");
                $("div").text(json);
            })
        }
        function nextpage(npage) {
            $("button").remove();
            $("tr:not(tr:first)").remove();
            var serialize = $("#myform").serialize()+"&pageindex="+npage;
            $.getJSON("/main",serialize,function (data) {
                alert(data.total)
                $.each(data.list,function (i, item) {
                    var sex="";
                    if (item.sex == 0) {
                        sex="男"
                    } else{
                        sex="女"
                    }
                    var tr=$("<tr>\n" +
                        "<td><input type=\"radio\" name=\"id\" onclick=\"getxx("+item.id+")\">"+item.id+"</td>\n" +
                        "<td>"+item.name+"</td>\n" +
                        "<td>"+sex+"</td>\n" +
                        "<td><img src=\"/imgs/"+item.headUrl+"\" height=\"50\" width=\"50\"></td>\n" +
                        "<td>"+item.profession+"</td>\n" +
                        "</tr>");
                    $("table").append(tr);
                })
                var prev;
                var next;
                var pages;
                if (data.hasPreviousPage == true)
                    prev=$("<button onclick=\"nextpage("+data.prePage+")\">上一页</button>");
                if (data.hasNextPage == true)
                    next=$("<button onclick=\"nextpage("+data.nextPage+")\">下一页</button>");
                for (var i = data.pages; i >0; i--) {
                    pages=$("<button id='pages' onclick=\"nextpage("+i+")\">"+i+"</button>");
                    $("table").after(pages);
                }
                $("table").after(prev);
                $("table").after(next);
            })
        }
        $(function () {
            nextpage(1)
        })
    </script>
</head>
<body>
<form id="myform">
    姓名: <input name="name" type="text">
    性别: <select name="sex">
            <option value="-1">全部</option>
            <option value="0">男</option>
            <option value="1">女</option>
          </select>
          <input type="button" onclick="nextpage(1)" value="搜索">
</form>
    <table border="1px solid">
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>头像</td>
            <td>职业</td>
        </tr>
    </table>
    <c:if test="${pages.hasPreviousPage}">
        <button onclick="nextpage(${prePage})">上一页</button>
    </c:if>
    <c:forEach begin="1" end="${pages.pages}" var="it" varStatus="i">
        <button onclick="nextpage(${it})">${it}</button>
    </c:forEach>
    <c:if test="${pages.hasNextPage }">
        <button onclick="nextpage(${nextPage})">下一页</button>
    </c:if>
    <div style="width: 200px;height: 200px;display: none">
    </div>
</body>
</html>
